import './Research.scss';
import { ResearchDetailStore } from '../../stores/ResearchDetailStore';
import { observer } from 'mobx-react';
import { useEffect } from 'react';
import { Loading } from '../../components/Loading';
import Icons from '../../images/images';
import eventBus from '../../utils/eventBus';

let researchDetailStore: ResearchDetailStore = new ResearchDetailStore();
export const ResearchDetail = observer((props: any) => {
    let id = props.match.params.id;
    useEffect(() => {
        researchDetailStore.getData(id);
    }, [id]);
    if (researchDetailStore.loading) {
        return <Loading />
    }
    return (
        <div className="researchDetailWrapper">
            <div className="top"></div>
            <div className="researchDetailContent" >
                <div className="tabs">
                    <img className="back" src={Icons.back} alt="" onClick={() => {
                        eventBus.emit('changeWhiteHeaderBg', false);
                        props.history.goBack()
                    }} />

                    <div className="items">
                        <div className="like">
                            <img src={researchDetailStore.detail?.islike == 1 ? Icons.icon_like_s : Icons.icon_like} alt="" onClick={() => {
                                researchDetailStore.like();
                            }} />
                            <div className="count">{researchDetailStore.detail?.likecount}</div>
                        </div>
                        <img className='follow' src={researchDetailStore.detail?.isfollow == 1 ? Icons.follow_s : Icons.follow} alt="" onClick={() => {
                            researchDetailStore.follow();
                        }} />
                    </div>
                </div>
                <div className="pdf" style={{ height: researchDetailStore.pdfHeight + 'px' }}>
                    <div id="viewerContainer" >
                        <div id="viewer" className="pdfViewer"></div>
                    </div>
                </div>
            </div>
        </div>
    )
});